<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<form class="application-general__content" *ngIf="applicationForm" [formGroup]="applicationForm" autocomplete="off" gioFormFocusInvalid>
  <mat-card class="details-card">
    <mat-card-content>
      <div class="details-card__header">
        <div class="details-card__header__info-inputs" formGroupName="details">
          <div class="details-card__header__info-inputs__first-row">
            <mat-form-field class="details-card__header__info-inputs__first-row__name-field">
              <mat-label>Application name</mat-label>
              <input formControlName="name" matInput type="text" maxlength="50" required />
              <mat-error *ngIf="applicationForm.get('details.name').hasError('required')">Application name is required. </mat-error>
            </mat-form-field>
          </div>
          <div class="details-card__header__info-inputs__second-row">
            <mat-form-field class="details-card__header__info-inputs__second-row__description-field">
              <mat-label>Description</mat-label>
              <input formControlName="description" matInput type="text" required />
              <mat-error *ngIf="applicationForm.get('details.description').hasError('required')"
                >Application description is required.
              </mat-error>
              <mat-hint align="start">Provide a description of your application, what it does, ...</mat-hint>
            </mat-form-field>

            <mat-form-field class="details-card__header__info-inputs__second-row__domain-field">
              <mat-label>Domain</mat-label>
              <input formControlName="domain" matInput type="text" />
              <mat-hint align="start">The domain your application will use, if relevant.</mat-hint>
            </mat-form-field>
          </div>
        </div>
        <div class="details-card__header__right-coll" formGroupName="images">
          <div class="details-card__header__right-coll__media">
            <gio-form-file-picker class="details-card__header__right-coll__media__picture" formControlName="picture" accept="image/*">
              <gio-form-file-picker-label>Application picture</gio-form-file-picker-label>
              <gio-form-file-picker-add-button class="details-card__header__right-coll__media__picture__btn">
                <span class="details-card__header__right-coll__media__picture__btn__text"> Click here or drag an image </span>
                <gio-avatar class="details-card__header__right-coll__media__picture__btn__default-avatar" [size]="114"></gio-avatar>
              </gio-form-file-picker-add-button>
              <gio-form-file-picker-empty>
                <gio-avatar [size]="114"></gio-avatar>
              </gio-form-file-picker-empty>
            </gio-form-file-picker>
            <gio-form-file-picker class="details-card__header__right-coll__media__background" formControlName="background" accept="image/*">
              <gio-form-file-picker-label>Application background</gio-form-file-picker-label>
              <gio-form-file-picker-add-button class="details-card__header__right-coll__media__background__btn">
                <span class="details-card__header__right-coll__media__background__btn__text"> Click here or drag an image </span>
              </gio-form-file-picker-add-button>
              <gio-form-file-picker-empty><span>No background defined</span></gio-form-file-picker-empty>
            </gio-form-file-picker>
          </div>
          <div class="details-card__header__right-coll__info">
            <dl class="gio-description-list">
              <dt>Owner</dt>
              <dd gioClipboardCopyWrapper [contentToCopy]="initialApplication.owner.displayName">
                {{ initialApplication.owner.displayName }}
              </dd>
              <dt>Created</dt>
              <dd>{{ initialApplication.created_at | date: 'medium' }}</dd>
              <dt>Type</dt>
              <dd>
                @switch (initialApplication.type) {
                  @case ('SIMPLE') {
                    Simple
                  }
                  @case ('BROWSER') {
                    SPA
                  }
                  @case ('WEB') {
                    Web
                  }
                  @case ('NATIVE') {
                    Native
                  }
                  @case ('BACKEND_TO_BACKEND') {
                    Backend to backend
                  }
                  @default {
                    {{ initialApplication.type }}
                  }
                }
              </dd>
              <dt>API key mode</dt>
              <dd>
                @switch (initialApplication.api_key_mode) {
                  @case ('UNSPECIFIED') {
                    <span matTooltip="From the 2nd apiKey subscription onwards, you can choose whether or not to share the api Key"
                      >Unspecified</span
                    >
                  }
                  @case ('SHARED') {
                    <span matTooltip="Use the same API key in all application subscriptions">Shared</span>
                  }
                  @case ('EXCLUSIVE') {
                    <span matTooltip="Each application subscription has its own API key">Exclusive</span>
                  }
                  @default {
                    {{ initialApplication.api_key_mode }}
                  }
                }
              </dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="details-card__actions" *ngIf="!isReadOnly">
        <button
          *gioPermission="{ anyOf: ['application-definition-u'] }"
          mat-button
          class="details-card__actions_btn"
          [routerLink]="'../subscriptions/subscribe'"
        >
          <mat-icon svgIcon="gio:language"></mat-icon>
          Subscribe to APIs
        </button>
      </div>
    </mat-card-content>
  </mat-card>

  <ng-container *ngIf="initialApplication.type === 'SIMPLE'">
    <mat-card class="details-card" formGroupName="OAuth2Form">
      <mat-card-content>
        <div class="details-card__header">
          <h3>OAuth2 Integration</h3>
        </div>
        <div class="details-card__header__info-inputs">
          <div class="details-card__header__info-inputs__client_id-row">
            <mat-form-field>
              <mat-label>Client ID</mat-label>
              <input formControlName="client_id" matInput type="text" maxlength="300" minlength="1" gioClipboardCopyWrapper />
              <mat-hint align="start"
                >The <code>Client_id</code> of the application. This field is required to subscribe to certain type of API Plan (OAuth2,
                JWT).
              </mat-hint>
            </mat-form-field>
          </div>
        </div>
      </mat-card-content>
    </mat-card>
  </ng-container>

  <ng-container *ngIf="initialApplication.type !== 'SIMPLE'">
    <h2 class="details-title-openid">OpenID Connect Integration</h2>
    <mat-card class="details-card-openid" formGroupName="OpenIDForm">
      <mat-card-content>
        <div class="details-card__header">
          <h3>OpenID Connect Integration</h3>
        </div>
        <div class="details-card__header__info-inputs">
          <div class="details-card__header__right-coll__media coll-oauth">
            <mat-form-field class="oauth">
              <mat-label>Client ID</mat-label>
              <input #clientIdInput formControlName="client_id" matInput type="text" maxlength="50" readonly />
              <gio-clipboard-copy-icon matIconSuffix [contentToCopy]="clientIdInput.value"></gio-clipboard-copy-icon>
            </mat-form-field>

            <mat-form-field class="oauth">
              <mat-label>Client Secret</mat-label>
              <input #clientSecretInput formControlName="client_secret" matInput type="text" readonly />
              <gio-clipboard-copy-icon matIconSuffix [contentToCopy]="clientSecretInput.value"></gio-clipboard-copy-icon>
            </mat-form-field>
          </div>
          <div class="details-card__header__info-inputs__second-row">
            <mat-form-field>
              <mat-label>Allowed grant types</mat-label>
              <mat-select formControlName="grant_types" multiple>
                <mat-option *ngFor="let grantType of applicationType.allowed_grant_types" [value]="grantType.type">{{
                  grantType.name
                }}</mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field class="example-chip-list" *ngIf="applicationType.requires_redirect_uris">
              <mat-label>Redirect URIs</mat-label>
              <gio-form-tags-input formControlName="redirect_uris" placeholder="Enter a redirect URI"> </gio-form-tags-input>
              <mat-hint align="start">URIs where the authorization server will send OAuth responses</mat-hint>
            </mat-form-field>
          </div>
        </div>
      </mat-card-content>
    </mat-card>
  </ng-container>

  <mat-card class="danger-card" *ngIf="!isReadOnly">
    <mat-card-content>
      <h3 class="danger-card__title">Danger Zone</h3>
      <div class="danger-card__actions">
        <ng-container *gioPermission="{ anyOf: ['application-definition-d'] }">
          <div class="danger-card__actions__action">
            <span class="gv-form-danger-text"> Delete this Application. </span>
            <button mat-button color="warn" (click)="deleteApplication()">Delete</button>
          </div>
        </ng-container>
      </div>
    </mat-card-content>
  </mat-card>

  <gio-save-bar [form]="applicationForm" [formInitialValues]="initialApplicationGeneralFormsValue" (submitted)="onSubmit()"></gio-save-bar>
</form>
